@import "library.less";
//声明变量
@size-100: 100px;
@theme_color: red;
@var: 50vh/2;


//声明一个边框的类样式
.bordered {
    border: 1px solid black;
}

#app {
    width: @size-100*5;
    //@h-100变量是从library。less文件中引入的
    height: @h-100*5;
    background-color: @theme_color;
    margin: 10px auto;
    //使用Mixin语法
    .bordered();

    h1 {
        color: bisque;
    }
}

&.logo-img {
    width: @size-100 ;
    .bordered();
    background-color: #efefef;
    border-radius: 50%;
    padding: 5px;
}


&::after {
    display: block;
    content: "hello world";
    width: @size-100;
    height: @size-100 ;
    .bordered();
}

.box {
    width: ~'calc(50% + (50vh/2 - 20px))';
    .bordered();
    height: @size-100;
}